<template>

  <div>
    <!--筛选查询-->
    <div class="box">
      <div class="title">筛选查询</div>
      <div class="cont">
        <span>输入搜索：</span>
        <el-input v-model="name" style="width: 180px;margin-left:20px" placeholder="商品名称/商品型号"></el-input>

        <span>商品分类：</span>
        <el-tree-select class="sel" v-model="categoryCode" :data="tree" check-strictly :render-after-expand="false"
          :props="defaultProps" />

        <span>状态：</span>
        <el-select v-model="status" placeholder="全部" class="sel">
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <el-button @click="initGoods()" style="margin-left:20px">查询结果</el-button>
      </div>
    </div>

    <!--数据列表-->
    <div class="box">
      <div class="title" style="margin-top: 30px">
        <span>商品列表</span>
        <el-button class="enterpriseBtn">启用</el-button>
        <el-button class="enterpriseBtn">导入</el-button>
        <el-button class="enterpriseBtn">导出</el-button>
        <el-button @click="save" class="enterpriseBtn" type="primary">新增商品</el-button>
      </div>

      <el-table :data="goodsData" stripe border ref="goodsRef" style="width: 100%; border: 1px solid #e0e0e0"
        :header-cell-style="{
          'text-align': 'center',
          'font-size': '16px',
          color: '#666666',
          borderColor: '#e0e0e0',
        }" :cell-style="{
          'text-align': 'center',
          'font-size': '14px',
          color: '#666666',
          borderColor: '#e0e0e0',
        }">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" />
        <el-table-column prop="name" label="商品名称" />
        <el-table-column prop="categoryName" label="商品分类" />
        <el-table-column prop="spec" label="规格型号" />
        <el-table-column prop="unit" label="单位" />
        <el-table-column prop="rateMoney" label="当前库存" />
        <el-table-column prop="num" label="期初数量" />
        <el-table-column prop="oldPrice" label="单位成本" />
        <el-table-column prop="total" label="期初总价" />
        <el-table-column prop="purchasePrice" label="预计采购价" />
        <el-table-column prop="price" label="零售价" />
        <el-table-column prop="status" label="状态" :formatter="statuFormatter" />

        <el-table-column label="操作">
          <template v-slot="{ row }">
            <span class="btn">编辑</span>
            <span class="btn">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="box" style="
        margin-top: 20px;
        border: 1px solid #e0e0e0;
        height: 50px;
        padding: 10px;
        box-sizing: border-box;
        padding-left: 1200px;
      ">
      <el-pagination :page-size="pageSize" :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="chg" @current-change="chgpg" />
    </div>


  </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { querytree } from '@/api/set/goodsCategory.js'
import { queryGoods } from '@/api/set/goods.js'
import { getUser } from '@/utils/session.js'
import { useRouter } from "vue-router";
//属性
let user = {}
//路由跳转
const router = useRouter()

//商品表格引用
const goodsRef = ref(null)
//分页参数
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
//查询参数
const name = ref() //商品名称/商品型号
const status = ref()  //商品状态
const categoryCode = ref() //商品分类编码

//分类树
let tree = ref([]);

//分类树属性
const defaultProps = {
  children: "children",
  label: "name",
  value: "code",
};

//商品列表
let goodsData = ref([])

//商品状态
const statusOptions = [
  {
    value: 0,
    label: "全部",
  },
  {
    value: 1,
    label: "已启用",
  },
  {
    value: 2,
    label: "已禁用",
  }
];


//方法

//每页显示的个数  每页的记录数
let chg = (pgsize) => {
  pageSize.value = pgsize;
  page.value = 1;
  initGoods();
};
//页数发生变化  第几页
let chgpg = (pg) => {
  page.value = pg;
  initGoods();
};

//商品状态格式化方法
let statuFormatter = (row) => {
  const type = row.status;
  if (type == 1) {
    return "已启用";
  } else if (type == 2) {
    return "已禁用";
  }
};

//查询分类树
let initTree = async () => {
  let res = await querytree()

  if (res.code == 200) {
    tree.value = res.data;
    tree.value.unshift({ name: "全部分类", value: '10' });
  }

}

//查询商品列表
let initGoods = async () => {
  //查询参数
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    categoryCode: categoryCode.value,
    name: name.value,
    status: status.value,
    eid: user.eid
  }

  let res = await queryGoods(data)
  if (res.code == 200) {
    goodsData.value = res.data.list;

    //更新分页参数
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }

}

//新增商品
let save = () => { 
  router.push("/goods/save")
}

//生命周期
onMounted(async () => {
  user = getUser()
  await initTree()
  await initGoods()
})


</script>


<style scope>
* {
  padding: 0;
  margin: 0;
}

.box {
  margin-right: 200px;
}

.title {
  border: 1px solid #e0e0e0;
  border-bottom: none;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  padding-left: 15px;
  color: #666666;
}

.cont {
  border: 1px solid #e0e0e0;
  background-color: #fff;
  height: 60px;
  line-height: 60px;
}

.cont>span {
  margin-left: 30px;
  color: #666666;
  font-size: 16px
}

.sel {
  width: 180px;
  margin-left: 20px;
}

.btn {
  margin-left: 5px;
  font-size: 14px;
  color: #39f;
  cursor: pointer;
}

.enterpriseBtn {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
</style>